<template>
  <div v-loading="formLoading">
	  <el-table :data="tableData" :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" fit highlight-current-row class="c-width100 color-222 family-PingFangSC-Regular font-s12">
      <el-table-column align="center" label="序号" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="默认名称" width="180">
        <template slot-scope="scope">
          <span>{{scope.row.defaultItem}}</span>
        </template>
      </el-table-column>
      <el-table-column  align="center" label="自定义名称">
        <template slot-scope="scope">
          <el-input :disabled="scope.row.isDefault" :maxlength="8" v-model="scope.row.name" style="width: 300px"></el-input>
          <!--<span>{{scope.row.name}}</span>-->
        </template>
      </el-table-column>
      <el-table-column v-if="permission == 3" width="200" align="center" label="操作">
        <template slot-scope="scope">
          <!--<el-checkbox v-model="scope.row.isCustom" :true-label="1" :false-label="0">自定义</el-checkbox>-->
          <b @click="editName(scope.$index)">修改</b>
          <span class="color-409">|</span>
          <b @click="saveName(scope.$index)" :disabled="scope.row.isDefault">保存</b>
        </template>
      </el-table-column>
    </el-table>
    <p class="font-s14 margin-t margin-b color-999">备注：每个模块名称，建议6个汉字以内，最多不超过8个汉字</p>
  </div>
</template>

<script>
import { getTitleSetting, saveTitleSetting } from '@/api/systemManage'
import { shopManage_systemManage } from '@/utils/permission'
const defaultItem = [
  "课程预告",
  "专栏",
  "精品课程",
  "测试专题",
  "课程分类",
  "资料库",
  "线上商城",
  "社群",
  "友商链接"
];

export default {
  data() {
    return {
    	formLoading: false,
      permission: 3,
      tableData: []
    }
  },
  created() {
    this.getModelPermission()
    this.getDetail()
  },
  methods: {
    getModelPermission() {
      this.permission = shopManage_systemManage()
    },
    getDetail() {
      getTitleSetting().then(res => {
        console.log('getTitleSetting')
        console.log(res.data)
        let i = 1
        const title = res.data.data
        for (var key in title) {
          if (key != 'ctId') {
            console.log(key)
            this.tableData.push({ id: i, defaultItem: defaultItem[i-1], name: title[key], key: key, isDefault: true })
            i++
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },
    saveTitle(data) {
    	this.formLoading = true
      saveTitleSetting(data).then(res => {
        this.formLoading = false
        console.log(res.data)
        this.$message.success('保存成功')
      }).catch(error => {
        this.formLoading = false
        console.log(error)
      })
    },
    editName(index) {
      this.tableData[index].isDefault = false
    },
    saveName(index) {
      const key = this.tableData[index].key
      const name = this.tableData[index].name
      if(name.replace(/(^\s*)|(\s*$)/g,'')=="") {
        this.$message({ message: '自定义名称不能为空' })
        return false
      }
      this.saveTitle({ key: key, name: name })
      this.tableData[index].isDefault = true
    }
  }
}
</script>
<style scoped>

</style>
